<template>
	<view class="Login">
		<view class="LoginBox">
			<view class="FormBox">
				<view class="Logintitle">欢迎登录若免</view>
				<view class="inputBox">
					<input class="input" :type="type1" placeholder="请输入手机号" v-model="mobile"/>
					<view @click="emptyBtn">
						<u-icon name="close-circle" size="30" color="#707070"></u-icon>
					</view>
				</view>
				<view class="inputBox">
					<input class="input" :type="type2" placeholder="请输入验证码" v-model="password"/>
					<view style="width: 180upx;text-align: end;color:#409EFF" @click="getCode">{{codeText}}</view>
					<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
				</view>
				<view class="modeBox">
					<view></view>
					<view class="otherLogin">
						<view class="otherItem" @click="toLogin">密码登录</view>
						<view class="otherItem" @click="toForgetPassword">忘记密码？</view>
						<view class="otherItem" @click="toRegister">立即注册</view>
					</view>
				</view>
				<view class="loginBtn" @click="submit">登录</view>
				<view style="font-size: 28upx;margin-top: 30upx;text-align: center;" @click="toUserXy">登录即代表您已同意<text style="color: #409EFF;">《用户服务协议》</text></view>
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				mobile:'',
				password:'',
				type1:"number",
				type2:"number",
				codeText:''
			}
		},
		methods: {
			toUserXy(){
				uni.navigateTo({
					url:"/pages/pageone/pages/About-us/About-us?index=2"
				})
			},
			submit(){
				let obj = {};
				obj.mobile = this.mobile;
				obj.code = this.password;
				// #ifdef APP
				obj.cid = app.$vm.globalData.pushObj.clientid;
				// #endif
				this.$u.api.loginVerificationLogin(obj).then(res=>{
					this.$refs.uToast.show({
						type:"success",
						title:"登录成功",
						duration:2000
					})
					this.$u.http.setConfig({
						header: {
							'token': res.token
						}
					})
					uni.setStorageSync("rmToken",res.token);
					uni.setStorageSync("userId",res.user_id);
					let obj = {};
					obj.username = res.username;
					obj.token = res.token;
					obj.user_id = res.user_id;
					obj.image_url = res.image_url;
					uni.setStorageSync("rmUser",obj);
					app.$vm.createConnect();
					let pages = getCurrentPages();
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						})
					},1500)
				})
			},
			//注册
			toRegister(){
				uni.redirectTo({
					url:"/pages/pagefour/pages/Register/Register"
				})
			},
			//忘记密码
			toForgetPassword(){
				uni.redirectTo({
					url:"/pages/pagetwo/pages/ForgetPassword/ForgetPassword"
				})
			},
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					
					let obj = {};
					obj.mobile = this.mobile;
					obj.type = 3;
					if(!this.mobile){
						this.$refs.uToast.show({
							type:"error",
							title:"请输入手机号",
							duration:2000
						})
						return false;
					}
					console.log(app.$vm.globalData)
					if(!app.$vm.globalData.phoneReg.test(this.mobile)){
						this.$refs.uToast.show({
							type:"error",
							title:"请输入正确的手机号",
							duration:2000
						})
						return false;
					}
					this.$u.api.sendMessage(obj).then(res=>{
						console.log(res)
						uni.hideLoading();
						this.$refs.uToast.show({
							type:"success",
							title:"发送成功",
							duration:2000
						})
						this.$refs.uCode.start();
					})
				}else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			toLogin(){
				uni.redirectTo({
					url:"/pages/pagethree/pages/Login/Login"
				})
			},
			emptyBtn(){
				this.mobile = ''
			}
		}
	}
</script>

<style scoped lang="less">
.status_bar{
	height: var(--status-bar-height);
	width: 100%;
}
.Login{
	// padding-top: 88upx;
	.LoginBox{
		padding: 64upx 112upx;
		.FormBox{
			display: flex;
			flex-direction: column;
			// justify-content: center;
			.Logintitle{
				font-size: 48upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				text-align: center;
				margin-bottom: 80upx;
			}
			.inputBox{
				width: 100%;
				display: flex;
				align-items: center;
				padding: 32upx 0;
				border-bottom: 2upx solid #EFEFEF;
				.input{
					flex: 1;
					font-size: 28upx;
					border: 0;
					outline: 0;
					color: #555555;
				}
			}
			.modeBox{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 24upx 0;
				.otherLogin{
					display: flex;
					align-items: center;
					.otherItem{
						font-size: 20upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						margin-left: 32upx;
					}
				}
			}
			.loginBtn{
				width: 526upx;
				height: 92upx;
				background: #FFAC3F;
				opacity: 1;
				border-radius: 46upx;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				line-height: 92upx;
				text-align: center;
				color: #FFFFFF;
				margin-top: 48upx;
			}
		}
	}
}
</style>
